<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>点我</button>
    <button>你好</button>
</body>
<script>
  var btns = document.querySelectorAll("button");
  // 事件触发线程:会增加一个监听。监听着你的按钮是否发生了单击事件。一旦发生了单击事件，会将
  // 回调函数交给主线程。如果主线程空闲，那么会立即执行该回调，如果主线程忙碌，那么要等主线程空闲下来之后才会执行回调。
  btns[0].onclick = function () {
    // 点击按钮的时间。
    var startTime = Date.now();
    // setTimeout定时器的时间不一定准确，当同步的代码逻辑比较复杂时，可能时间会被延长。
    setTimeout(function () {// 当200毫秒的时间到达之后，会将回调函数放置到JS线程的尾部
      var endTime = Date.now();
      console.log(endTime - startTime);//
    },200)
    var num = 0
    for(var i=0;i<100000000;i++){
      num+=Math.random();
    }
    console.log(num);
  }
  btns[1].onclick = function(){
      console.log("你好");
  }
</script>
</html>